<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<link rel="stylesheet" href="/pear/component/pear/css/pear.css" />
	<link rel="stylesheet" href="/pear/admin/css/other/person.css" />
	
	<style>
		#day{
			height: 50px;
			margin-top: 5px;
			font-size: 26px;
			line-height: 50px;
			text-indent: 2em;

		}

		#btn{
			text-align: center;
			line-height: 100px;
		}
		#liuyan{
			height: 120px;
			margin-top: 15px;
			width: 100%;
			display: flex;
			justify-content: space-between;
		}
		#form_liuyan{
			margin-left: 10px;
		}
		ul{
			margin-left: 2em;
		}
		#test1 img{
			height: 500px;
			width: 100%;
		}
		#test1{
			margin-left: 10px;
		}
		#service_btn{
			display: block;
			height: 100px;
			width: 380px;
			margin: -10px 10px 10px 10px;
			padding-right: 80px;
			padding-left: 50px;
			background-color: #1c6ca1;
			border-radius: 5px;
		}
		#other{
			height: 100px;
			width: 200px;
			margin: 10px;
			margin-top: -10px;
		}
		#other img{
			height: 100px;
			width: 200px;
		}


	</style>
</head>
<body class="pear-container">
	<div class="layui-row layui-col-space10">
		<div class="layui-col-md3">
			<div class="layui-card">
				<div class="layui-card-body" style="padding: 25px;">
					<div class="text-center layui-text">
						<div class="user-info-head" id="userInfoHead">
							<img th:src="${customer1.photo}" id="userAvatar" width="115px" height="115px" alt="">
						</div>
						<h2 id="userName" th:text="${customer1.name}" style="padding-top: 20px;font-size: 20px;"></h2>


					</div>
				</div>
				<div style="height: 45px;border-top: 1px whitesmoke solid;text-align: center;line-height: 45px;font-size: 13.5px;">
					<span>欢迎！</span>
				</div>
			</div>

			<div class="layui-card">
				<div class="layui-card-header">
					服务记录
				</div>
				<div class="layui-card-body">
					<ul class="list" id="list_apply">
					</ul>
				</div>
			</div>
			<div class="layui-card">
				<div class="layui-card-header">
					账号关联
				</div>
				<div class="layui-card-body">
					<ul class="list">
						<li class="list-item"><span class="title"><i class="layui-icon" style="color: #1E9FFF;">&#xe676;</i> QQ</span><span class="footer" style="color: cornflowerblue;">已关联</span></li>
						<li class="list-item"><span class="title"><i class="layui-icon" style="color: #3CB371">&#xe677;</i>微信</span><span class="footer" style="color: cornflowerblue;">已关联</span></li>
						<li class="list-item"><span class="title"><i class="layui-icon" style="color: 	#FF4500">&#xe618;</i>Facebook</span><span class="footer" style="color: cornflowerblue;">已关联</span></li>
						<li class="list-item"><span class="title"><i class="layui-icon" style="color: #1E9FFF;">&#xe7ae;</i>Google</span><span class="footer" style="color: cornflowerblue;">已关联</span></li>
					</ul>
				</div>
			</div>
		</div>
		<div class="layui-col-md9">
			<div class="layui-card">
				<div class="layui-card-header">
					主页
				</div>
				<div class="layui-card-body">
					<div id="day">
						您已经来到云沐里&nbsp;<span style="color:darkred;font-size: 40px;font-weight: 400;">25</span>&nbsp;天。
					</div>
					<hr>
					<div class="layui-carousel" id="test1">
						<div carousel-item>
							<div><img src="/pear/my/img/lbone.jpg" alt=""></div>
							<div><img src="/pear/my/img/lbtwo.jpg" alt=""></div>
							<div><img src="/pear/my/img/lbthree.jpg" alt=""></div>
						</div>
					</div>
					<hr>
					<div id="liuyan">
						<div id="form_liuyan">
							<textarea placeholder="请输入您的留言..." id="liuyanContent" style="margin-top: -10px; width: 350px; height: 100px;"></textarea>
							<button class="layui-btn" id="liuyan_btn" style="margin-top: -10px">发表</button>
						</div>
						<div id="btn">
							<button  type="button" class="layui-btn layui-btn-lg" id="service_btn" >服务申请</button>
						</div>
						<div id="other">
							<img src="/pear/my/img/yml.jpg" alt="">
						</div>
					</div>
					<hr>

					
				</div>

			</div>
		</div>
	</div>

	<script src="/pear/component/layui/layui.js"></script>
	<script src="/js/jquery-3.2.1.min.js"></script>
	<script>

		// 文档加载事件:渲染服务记录条数 登录信息等
		$('#test').click(function () {
			$.ajax({
				url:"/manager/account",
				success:function (data) {
					console.log(1)
					//console.log(data);
				}
			})
		})
		$(function () {
			var userName = $('#userName').html();
			//console.log(userName);
			$.ajax({
			url:'/customer/serviceList',
			data:{"userName":userName},
			success:function (data) {
				//console.log(data);
				var html ='';
				for (let i = 0; i < data.length;i++){
					if (data[i].Dealed == null){
						data[i].Dealed = "未处理";
					}

						html +=
								'<li class="list-item">'+
								'<span class="title">'+data[i].serviceType+'</span>'+
								'<span class="footer">'+data[i].serviceDate+
								'<span style="font-size: 11px" id="status_'+i+'">'+'&nbsp;'+data[i].Dealed+'</span>'
						'</span>'+
						'</li>';
				}
				$('#list_apply').html(html);
			}
			})
		});


	</script>

	<script>
		layui.use(['jquery', 'element', 'layer','form','laydate','carousel'], function () {
			var element = layui.element,
				layer = layui.layer,
				$ = layui.jquery,
				form = layui.form,
				laydate = layui.laydate;
			var carousel = layui.carousel;
			//建造实例
			carousel.render({
				elem: '#test1'
				,width: '98%' //设置容器宽度
				,height:'500px'
				,interval:3000
				,anim: 'fade' //切换动画方式
				,autoplay:true
			});

			// 服务申请
			$('#service_btn').click(function () {
				layer.open({
					type:2,
					title: '服务申请',
					area: ['800px', '600px'],
					content:['/home/applyService_High','no'],
					end:function () {
						layer.msg("申请成功");
					}
				})
			})

			let MODULE_PATH = "operate/";
			$("#userAvatar").attr("src", parent.layui.$(".layui-nav-img").attr("src"));

			window.callback = function (data) {
				layer.close(data.index);
				$("#userAvatar").attr("src", data.newAvatar);
				parent.layui.$(".layui-nav-img").attr("src", data.newAvatar);
			}



			$("#userAvatar").click(function () {
				layer.open({
					type: 2,
					title: '更换头像',
					shade: 0.1,
					area: ["900px", "500px"],
					content: "/pear/view/system/operate/uploadProfile.html",
					btn: ['确定', '取消'],
					yes: function (index, layero) {
						window['layui-layer-iframe' + index].submitForm();
						window.location.href="/home/customer"
					}
				});
			});
		});
	</script>



	<script>
		// 处理留言功能

		$("#liuyan_btn").click(()=>{
			// 获取留言内容
			var liuyanContent = $('#liuyanContent').val();
			// 获取用户名
			var userName = $('#userName').html();
			// 获取当前日期
			var date = new Date().toLocaleDateString();
			// 获取用户头像
			var photo = "头像地址";
			$.ajax({
				url:'/customer/liuyan',
				data:{"userName":userName, "liuyanContent":liuyanContent,"date":date, "photo":photo},
				success:function (data) {
					layer.msg("留言成功");
					console.log(data);
				}
			})
		})
	</script>
</body>
</html>
